<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <VsFormItem label="Tooltip">
          <BaseOption
            :form="form"
            option="tooltip"
            :widget-instance-id="widgetInstanceId"
            :config="config"
            :show-correlation="false"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.background')"
          prop="backgroundType"
        >
          <el-radio-group
            v-model="form.backgroundType"
            size="default"
            :fill="activeColorRadio"
            style="width:90%;"
          >
            <el-radio label="transparent">{{ $demoi18n('word.transparent') }}</el-radio>
            <el-radio label="color">{{ $demoi18n('word.selectColor') }}</el-radio>
          </el-radio-group>
        </VsFormItem>

        <VsFormItem
          v-show="form.backgroundType === 'color'"
          :label="$demoi18n('word.backgroundColor')"
          class="color"
        >
          <ColorPicker
            v-model:value="form.backgroundColor"
            :class="'vis-color-picker-panel-' + xvueTheme"
            style="margin-top:8px"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.paddingTop')"
          prop="paddingTop"
        >
          <Range
            v-model:value="form.paddingTop"
            :min="0"
            :max="100"
            type="input"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.paddingDown')"
          prop="paddingBottom"
        >
          <Range
            v-model:value="form.paddingBottom"
            :min="0"
            :max="100"
            type="input"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.paddingLeft')"
          prop="paddingLeft"
        >
          <Range
            v-model:value="form.paddingLeft"
            :min="0"
            :max="100"
            type="input"
          />
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.paddingRight')"
          prop="paddingRight"
        >
          <Range
            v-model:value="form.paddingRight"
            :min="0"
            :max="100"
            type="input"
          />
        </VsFormItem>
        <VsFormItem>
          <template #label>
            <span>
              <el-tooltip
                :content="$demoi18n('pabel.labelTip.componentSizeNotEnoughShowScorllbar')"
                placement="top"
              >
                <span>{{ $demoi18n('word.scrollBar') }}</span>
              </el-tooltip>
            </span>
          </template>
          <el-switch v-model="form.showScrollBar"></el-switch>
          <el-tooltip
            placement="top"
            :effect="xvueTheme"
          >
            <template #content>
              <div>{{ $demoi18n('panel.labelTip.hoverTextScrollBarTip') }}</div>
            </template>
            <span :style="{ marginLeft: '5px' }">
              <el-icon style="color:#00aaff"><InfoFilled /></el-icon>
            </span>
          </el-tooltip>
        </VsFormItem>
        <VsFormItem
          :label="$demoi18n('word.showThousand')"
          prop="showThousand"
        >
          <el-switch v-model="form.showThousand"></el-switch>
        </VsFormItem>
        <VsFormItem
          class="inner"
          :label="$demoi18n('panel.cssStyle.verticalAlign')"
        >
          <el-radio-group
            v-model="form.alignItems"
            class="icon-radio-group"
          >
            <el-radio
              v-for="(item, index) in icon.verStyle"
              :key="index"
              :label="item.value"
              border
            >
              <img
                :src="item.img"
                :alt="item.key"
              />
            </el-radio>
          </el-radio-group>
        </VsFormItem>
      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import BaseOption from '../../common/base-option/base-option.vue';
import Range from '../../common/range/range.vue';
import ExtStyleSetting from '@/components/common/ext-style/ext-style-setting.vue';
export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    Range,
    PanelLabelOverflowTooltip,
    ColorPicker,
    ExtStyleSetting,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      isLoading: false,
      form: {},
    };
  },
  computed: {
    bottomImg() {
      if (window._adoPremise.uc.theme === 'dark') {
        return new URL('@/components/common/css-style-editor/icon-config/icon/dark/bottom-align.png', import.meta.url).href;
      }
      return new URL('@/components/common/css-style-editor/icon-config/icon/light/bottom-align.png', import.meta.url).href;
    },
    middleImg() {
      if (window._adoPremise.uc.theme === 'dark') {
        return new URL('@/components/common/css-style-editor/icon-config/icon/dark/v-center-align.png', import.meta.url).href;
      }
      return new URL('@/components/common/css-style-editor/icon-config/icon/light/v-center-align.png', import.meta.url).href;
    },
    topImg() {
      if (window._adoPremise.uc.theme === 'dark') {
        return new URL('@/components/common/css-style-editor/icon-config/icon/dark/top-align.png', import.meta.url).href;
      }
      return new URL('@/components/common/css-style-editor/icon-config/icon/light/top-align.png', import.meta.url).href;
    },
    icon() {
      return {
        verStyle: [
          {
            key: 'verBottom',
            img: this.bottomImg,
            value: 'flex-end',
          },
          {
            key: 'verMiddle',
            img: this.middleImg,
            value: 'center',
          },
          {
            key: 'verTop',
            img: this.topImg,
            value: 'flex-start',
          },
        ],
      };
    },
  },
  watch: {},
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
    }
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      .inner {
        .icon-radio-group {
          :deep(.el-radio + .el-radio) {
            margin-left: 10px;
          }
          :deep(.el-radio) {
            padding: 0;
            border-radius: 0;
            height: auto;
            margin-right: 0;
            .el-radio__input {
              display: none;
            }
            .el-radio__label {
              padding-left: 0;
              height: 25px;
              img {
                height: 18px;
                width: 22px;
              }
            }
          }
        }
      }
      padding: 0 10px;

      :deep(.el-slider) {
        display: inline-block;
        width: 100px;
      }

      :deep(.color) {
        .el-form-item__content {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .el-input {
            width: 100px;
            margin-right: -1px;
          }
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 1px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }

      .colorSquare {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
